<template>
	<view class="work-conditions-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="零活详情"></CustomNav>
		<view class="info-block block" :style="'margin-top:'+mt">
			<view class="condition-item">
				<view class="condition-title">计价方式</view>
				<view class="condition-content">
					<view @click="changeOption(item.id,'single','valuation')" class="options-item col-2" :class="condition.valuation==item.id?'active':''" v-for="item in valuation" :key="item.id">{{item.name}}</view>
				</view>
			</view>
			<view class="condition-item">
				<view class="condition-title">单价区间（元）</view>
				<view class="condition-content" style="justify-content: space-between;">
					<input type="number" class="input" placeholder="请输入起始金额" placeholder-class="input-placeholder" v-model="condition.minPrice" maxlength="4" style="margin-right: 20rpx;" />
					<text class="line">—</text>
					<input type="number" class="input" placeholder="请输入结束金额" placeholder-class="input-placeholder" v-model="condition.maxPrice" maxlength="4" style="margin-left: 20rpx;" />
				</view>
			</view>
			<view class="condition-item">
				<view class="condition-title">用工人数（人）</view>
				<view class="condition-content" style="justify-content: space-between;">
					<input type="number" class="input" placeholder="请输入最少人数" placeholder-class="input-placeholder" v-model="condition.minPopulation" maxlength="4" style="margin-right: 20rpx;" />
					<text class="line">—</text>
					<input type="number" class="input" placeholder="请输入最大人数" placeholder-class="input-placeholder" v-model="condition.maxPopulation" maxlength="4" style="margin-left: 20rpx;" />
				</view>
			</view>
			<view class="condition-item">
				<view class="condition-title">开工日期</view>
				<view class="condition-content" style="justify-content: space-between;">
					<picker mode="date" @change="bindTime($event,'minStartTime')" :value="condition.minStartTime" class="input" :start="minStartTime">{{condition.minStartTime||'请选择开始日期'}}</picker>
					<text class="line">—</text>
					<picker mode="date" @change="bindTime($event,'maxStartTime')" :value="condition.maxStartTime" class="input" :start="minStartTime">{{condition.maxStartTime||'请选择结束日期'}}</picker>
				</view>
			</view>
		</view>
		<view class="btn-block">
			<view @click="reset" class="btn cancel">重置</view>
			<view @click="confirm" class="btn normal">确定</view>
		</view>
	</view>
</template>

<script>
	import {getValuationBasis} from '@/api/conf.js'
	import {getCurrentTime, keyValueToArray} from '@/util/util.js'
import { getStorage, setStorage } from '../../util/auth'
	export default{
		data(){
			return{
				topBgColor: 'rgba(0,0,0,0)',
				valuation:[],
				minStartTime:getCurrentTime('d'),
				condition:{
					valuation:0,
					minPrice:'',
					maxPrice:'',
					minStartTime:'',
					maxStartTime:'',
					minPopulation:'',
					maxPopulation:''
				},
			}
		},
		methods:{
			async getConf(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				await getValuationBasis().then(res=>{
					this.valuation=keyValueToArray(res)
				})
			},
			bindTime(e,key){
				this.condition[key]=e.detail.value
			},
			changeOption(value,type,key){
				if(type=='single'){
					this.condition[key]=this.condition[key]==value?0:value;
				}
			},
			reset(){
				this.condition={
					valuation:0,
					minPrice:'',
					maxPrice:'',
					minStartTime:'',
					maxStartTime:'',
					minPopulation:'',
					maxPopulation:''
				}
			},
			confirm(){
				setStorage('conditions',this.condition)
				uni.$emit('conditions');
				this.back();
			}
		},
		onLoad() {
			this.getConf()
			if(getStorage('conditions'))this.condition=getStorage('conditions')
		}
	}
</script>

<style lang="scss" scoped>
	.work-conditions-page {
		overflow: hidden;
	
		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}
	
		.block {
			width: $content-width;
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;
		}
		.info-block{
			margin: 0 auto;
			.condition-item{
				width: 100%;
				.condition-title{
					font-size: 34rpx;
					font-weight: bold;
					width: 100%;
				}
				.condition-content{
					width:100%;
					margin: 30rpx 0;
					display: flex;
					flex-wrap: wrap;
					.line{
						width: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.input{
						width: calc((100% - 90rpx)/2);
						border-radius: 20px;
						border:1px solid #ccc;
						font-size: 28rpx;
						height: 70rpx;
						padding: 0 20rpx;
						display: flex;
						align-items: center;
					}
					.options-item{ 
						height: 70rpx;
						font-size: 28rpx;
						border-radius: 20px;
						background: #eeeeee;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #767676;
						margin-bottom: 20rpx;
						margin-right: 20rpx;
					}
					.options-item.active{
						color: #fc9a11;
						border:1px solid #fc9a11;
						background: #fff0d6;
					}
					.options-item.col-4{
						width:calc((100% - 60rpx)/4);
					}
					.options-item.col-4:nth-child(4n){
						margin-right: 0;
					}
					.options-item.col-3{
						width: calc((100% - 40rpx)/3);
					}
					.options-item.col-3:nth-child(3n){
						margin-right: 0;
					}
					.options-item.col-2{
						width: calc((100% - 20rpx)/2);
					}
					.options-item.col-2:nth-child(2n){
						margin-right: 0;
					}
				}
			}
		}
		.btn-block{
			margin: 30rpx auto;
			display: flex;
			justify-content: center;
			.btn{
				margin: 0 30rpx;
			}
		}
	}
</style>